<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>嵌套路由</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/" exact>主页</router-link>
        <router-link to="/productDetails">商品详情</router-link>
        <router-link to="/shoppingCart">购物车</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>打开网站主页</div>" };
      const ProductDetails = {
        template: `
      <div>
        <p>
          <router-link to="/productDetails/product1">商品1</router-link>
          <router-link to="/productDetails/product2">商品2</router-link>
          <router-link to="/productDetails/product3">商品3</router-link>  
        </p>
        <router-view></router-view>
      </div>
    `,
      };
      const ShoppingCart = { template: "<div>打开购物车页面</div>" };
      const Product1 = { template: "<div>打开商品1详情页面</div>" };
      const Product2 = { template: "<div>打开商品2详情页面</div>" };
      const Product3 = { template: "<div>打开商品3详情页面</div>" };

      const routes = [
        { path: "/", component: Home },
        {
          path: "/productDetails",
          component: ProductDetails,
          children: [
            { path: "product1", component: Product1 },
            { path: "product2", component: Product2 },
            { path: "product3", component: Product3 },
          ],
        },
        { path: "/shoppingCart", component: ShoppingCart },
        { path: "*", redirect: "/" },
      ];
      const router = new VueRouter({
        routes,
      });
      const vm = new Vue({
        el: "#app",
        router,
      });
    </script>
  </body>
</html>
